﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 示例</title>
</head>
<body>
    <h1>WebSocket 示例</h1>
    <div>
        <input type="text" id="messageInput" placeholder="输入消息">
        <button id="sendButton">发送</button>
    </div>
    <ul id="messages"></ul>

    <script>
        // 创建 WebSocket 连接
        const ws = new WebSocket('ws://localhost:5000/ws');
        // 记录最后一次收到服务器 pong 的时间
        let lastPongTime = Date.now();

        // 监听连接打开事件
        ws.onopen = () => {
            console.log('已连接到 WebSocket 服务器');
            appendMessage('服务器', '连接已建立');
            startHeartbeat(); // 启动心跳检测
        };

        // 监听服务器发送的消息
        ws.onmessage = (event) => {
            const message = event.data;
            console.log('收到服务器消息:', message);
            appendMessage('服务器', message);
            if (message == 'ping') {
                appendMessage('客户端', 'pong');
                ws.send('pong');
            } else if (message == 'pong') {
                lastPongTime = Date.now();
            }
        };

        // 监听连接关闭事件
        ws.onclose = () => {
            console.log('WebSocket 连接已关闭');
            appendMessage('服务器', '连接已关闭');
        };

        // 监听连接错误事件
        ws.onerror = (error) => {
            console.error('WebSocket 错误:', error);
            appendMessage('服务器', '连接错误');
        };

        // 发送消息
        document.getElementById('sendButton').addEventListener('click', () => {
            const message = document.getElementById('messageInput').value;
            if (message) {
                ws.send(message); // 向服务器发送消息
                appendMessage('我', message);
                document.getElementById('messageInput').value = '';
            }
        });

        // 在页面上显示消息
        function appendMessage(sender, message) {
            const li = document.createElement('li');
            li.textContent = `${sender}: ${message}`;
            document.getElementById('messages').appendChild(li);
        }

        // 心跳检测逻辑
        let heartbeatInterval;

        function startHeartbeat() {
            heartbeatInterval = setInterval(() => {
                appendMessage('客户端',"ping");
                ws.send("ping");
                // 检查是否超过 60 秒未收到服务器的 ping
                if (Date.now() - lastPongTime > 60000) {
                    console.log('服务器超时未相应 pong，关闭连接');
                    ws.close(); // 关闭连接
                    stopHeartbeat();
                }
            }, 10000); // 每 10 秒检查一次，发一次ping
        }

        function stopHeartbeat() {
            clearInterval(heartbeatInterval);
        }
    </script>
</body>
</html>